import React, { PureComponent } from 'react'
import { Select, TreeSelect, Transfer, Cascader } from 'antd';
import { getSubject } from '@/services/lessons'
import { getAllPerson } from '@/services/peoples'
import { getTemplateList } from '@/services/paperInfo'
import styles from './AntComponents.less'
export class HardLevelSelect extends PureComponent<any, any> {
    onChange = (e: any, d: any) => {
        this.props.onChange ? this.props.onChange(e, d) : ''
    }
    render() {
        return (
            <Select placeholder="请选择难易程度" onChange={this.onChange} value={this.props.value + ''} style={{ width: 200 }} >
                <Select.Option key="0" value="0">全部</Select.Option>
                <Select.Option key="1" value="1">容易</Select.Option>
                <Select.Option key="2" value="2">较易</Select.Option>
                <Select.Option key="3" value="3">中等</Select.Option>
                <Select.Option key="4" value="4">较难</Select.Option>
                <Select.Option key="5" value="5">难</Select.Option>5
            </Select>
        )
    }
}
export class ExamSubjectTreeSelect extends PureComponent<any, any> {
    state = {
        data: []
    }
    componentDidMount() {
        getSubject().then(res => {
            if (!res || !res[0]) return;
            let data = JSON.stringify(res);
            data = data
                .replace(/id/g, 'value')
                .replace(/title/g, 'label')
                .replace(/pvalue/g, 'pid')
            data = JSON.parse(data);
            for (let i = 0; i < data.length; i++) {
                data[i].selectable = false;                
            }
            this.setState({
                data,
            });
        })
    }
    onChange = (e: any, d: any) => {
        this.props.onChange ? this.props.onChange(e, d) : ''
    }
    render() {
        return (
            <TreeSelect placeholder="请选择考试科目"listHeight={500} className={styles['tree-select']} onChange={this.onChange} value={this.props.value} style={{ width: 200 }} treeData={this.state.data} />
        )
    }
}

export class ExamSubjectCascader extends PureComponent<any, any> {
    state = {
        data: []
    }
    componentDidMount() {
        getSubject().then(res => {
            if (!res || !res[0]) return;
            let data = JSON.stringify(res);
            data = data
                .replace(/id/g, 'value')
                .replace(/title/g, 'label')
                .replace(/pvalue/g, 'pid');
            this.setState({
                data: JSON.parse(data),
            });
        })
    }
    onChange = (e: any, d: any) => {
        this.props.onChange ? this.props.onChange(e, d) : ''
    }
    render() {
        return (
            <Cascader placeholder="请选择考试科目" onChange={this.onChange} value={this.props.value} style={{ width: 200 }} options={this.state.data} />
        )
    }
}


export class RelatedPersonnelextendsTransfer extends PureComponent<any, any> {
    filterOption = (inputValue: any, option: any) => (
        option.id_number.indexOf(inputValue) > -1
        || option.name.indexOf(inputValue) > -1
        || (option.subjects && JSON.stringify(option.subjects).indexOf(inputValue) > -1)
    )
    state = {
        data: [],
    };
    renderList = (page: any) => {
        getAllPerson().then(res => {
            this.setState({
                data: res
            })
        })
    }
    componentDidMount() {
        this.renderList(1)
    }
    onChange = (targetKeys: any) => {
        this.props.onChange ? this.props.onChange(targetKeys) : ''
    };
    render() {
        return (
            <Transfer
                dataSource={this.state.data}
                targetKeys={this.props.value}
                showSearch
                filterOption={this.filterOption}
                onChange={this.onChange}
                render={item => item.name + `(${item.id_number})`}
                rowKey={item => item.id}
                pagination
                titles={['未选择', '已选择']}
            />
        )
    }
}

export class PaperTemplate extends PureComponent<any, any> {//试卷模板
    state = {
        template_list: []
    }
    onChange = (e: any, d: any) => {
        this.props.onChange ? this.props.onChange(e, d) : ''
    }
    componentDidMount() {
        getTemplateList({ template_name: '' }).then(res => {
            this.setState({
                template_list: res
            })
        })
    }

    render() {
        const { template_list } = this.state;
        return (
            <Select onChange={this.onChange} value={this.props.value} placeholder="请选择试卷模板" style={{ width: 200 }}>
                {
                    template_list.map((item: any) => {
                        return <Select.Option key={item.id} value={item.id}>{item.template_name}</Select.Option>
                    })
                }
            </Select>
        )
    }
}